<template>
  <div class="container">
    <h1>订单列表</h1>
    <div v-if="loading" class="loading">加载中...</div>

    <!-- 订单列表 -->
    <ul v-if="!loading && orders.length" class="order-list">
      <li v-for="order in orders" :key="order.id" class="order-item">
        <div class="order-details">
          <i class="fas fa-receipt"></i>
          <span>订单ID: {{ order.id }}</span>
          <span>总计: {{ order.total_price }} 元</span>
          <span :class="`status-${order.order_status}`">{{ orderStatus[order.order_status] }}</span>
          <button @click="openFeedbackModal(order)">立即评价</button>
          <button @click="openOrderCommModal(order)">查看评价</button>
        </div>
      </li>
    </ul>

    <!-- 没有订单 -->
    <p v-else-if="!loading" class="no-orders">暂无已支付订单。</p>

    <!-- 错误消息 -->
    <p v-else class="error-message">加载失败，请重试。</p>

    <!-- 评价弹出框 -->
    <div v-if="showModal" class="modal-overlay">
      <div class="modal">
        <h2>订单评价</h2>
        <p>订单ID: {{ selectedOrder?.id }}</p>

        <!-- 评论内容输入框 -->
        <textarea v-model="feedback" placeholder="请输入您的评价..." rows="4"></textarea>

        <!-- 评论等级选择 -->
        <div class="rating">
          <label>
            <input type="radio" v-model="rating" value="1" /> 好评
          </label>
          <label>
            <input type="radio" v-model="rating" value="2" /> 中评
          </label>
          <label>
            <input type="radio" v-model="rating" value="3" /> 差评
          </label>
        </div>

        <div class="modal-actions">
          <button @click="submitFeedback">提交</button>
          <button @click="closeModal">取消</button>
        </div>
      </div>
    </div>

    <!-- 查看评价弹出框 -->
    <div v-if="showOrderCommModal" class="modal-overlay">
      <div class="modal">
        <h2>订单评价信息</h2>
        <p>订单ID: {{ selectedOrder?.id }}</p>

        <!-- 订单的所有评价列表 -->
        <ul>
          <li v-for="comment in orderComments" :key="comment.id">
            <div class="comment">
              <p>评价等级: {{ getRatingText(comment.grade) }}</p>
              <p>评价内容: {{ comment.comment }}</p>
            </div>
          </li>
        </ul>

        <div class="modal-actions">
          <button @click="closeOrderCommModal">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const orders = ref([]); // 订单列表
const loading = ref(true); // 加载状态
const error = ref(null); // 错误状态
const user = ref(1); // 假设你在这里设置用户信息
const orderStatus = {
  1: '未支付',
  2: '已支付',
  3: '已取消',
  4: '已超时',
};

const showModal = ref(false); // 控制评价弹框显示
const showOrderCommModal = ref(false); // 控制查看评价弹框显示
const selectedOrder = ref(null); // 当前选中的订单
const feedback = ref(''); // 用户输入的评价内容
const rating = ref(null); // 用户选择的评论等级
const orderComments = ref([]); // 当前订单的所有评价

// 获取订单列表
const fetchOrders = async () => {
  loading.value = true;
  try {
    const response = await axios.get('http://127.0.0.1:8000/order/orderlist/', {
      params: { user: user.value } // 正确设置参数
    });
    orders.value = response.data.data;
  } catch (err) {
    console.error('获取订单失败:', err);
    error.value = '获取订单失败，请重试。';
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchOrders(); // 组件挂载时获取订单
});

// 打开评价弹窗
const openFeedbackModal = (order) => {
  selectedOrder.value = order;
  feedback.value = ''; // 清空已有的反馈
  rating.value = null; // 清空评论等级
  showModal.value = true;
};

// 关闭评价弹窗
const closeModal = () => {
  showModal.value = false;
  selectedOrder.value = null;
  feedback.value = '';
  rating.value = null;
};

// 提交评价
const submitFeedback = () => {
  if (feedback.value.trim() && rating.value) {
    console.log(`订单ID: ${selectedOrder.value.id} 的评价: ${feedback.value}, 评论等级: ${rating.value}`);
    axios.post('http://127.0.0.1:8000/order/ordercomm/', { order_id: String(selectedOrder.value.id), comment: feedback.value, grade: rating.value }).then((result) => {
      if (result.data.code == 200) {
        alert('评价成功！');
      } else {
        alert('评价失败，请重试。');
      }
    }).catch((err) => {
      console.error('提交评价失败:', err);
    });
    closeModal(); // 提交后关闭弹窗
  } else {
    alert('请输入评价内容并选择评论等级！');
  }
};

// 打开查看评价弹窗
const openOrderCommModal = (order) => {
  selectedOrder.value = order;
  fetchOrderComments(order.id); // 获取该订单的所有评价
  showOrderCommModal.value = true;
};

// 获取订单的所有评价
const fetchOrderComments = async (orderId) => {
  try {
    const response = await axios.get('http://127.0.0.1:8000/order/ordercommquy/', {
      params: { order_id: orderId }
    });
    if (response.data.code === 200) {
      console.log(response.data.data);
      
      orderComments.value = response.data.data; // 将返回的数据赋值给 orderComments
    } else {
      alert('获取订单评价失败，请重试。');
    }
  } catch (err) {
    console.error('获取订单评价失败:', err);
  }
};

// 关闭查看评价弹窗
const closeOrderCommModal = () => {
  showOrderCommModal.value = false;
  orderComments.value = []; // 清空评价数据
};

// 获取评价等级的文字描述
const getRatingText = (grade) => {
  switch (grade) {
    case "1": return '好评';
    case "2": return '中评';
    case "3": return '差评';
    // default: return '未知';
  }
};
</script>

<style scoped>
/* 主容器样式 */
.container {
  max-width: 800px;
  margin: 60px auto;
  padding: 40px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  font-family: 'Open Sans', sans-serif;
}

/* 标题样式 */
h1 {
  font-size: 2.8em;
  margin-bottom: 40px;
  text-align: center;
  color: #333333;
  font-weight: bold;
}

/* 加载中样式 */
.loading {
  text-align: center;
  font-size: 1.6em;
  color: #888888;
  margin-top: 60px;
}

/* 订单列表样式 */
.order-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* 订单项样式 */
.order-item {
  background-color: #f6f8fa;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 25px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.order-item:hover {
  transform: translateY(-7px);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
}

/* 订单详情样式 */
.order-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.order-details span {
  font-size: 1.3em;
  color: #333333;
}

/* 订单状态样式 */
.status-1 { color: #ff4d4f; }
.status-2 { color: #52c41a; }
.status-3 { color: #faad14; }
.status-4 { color: #999999; }

/* 按钮样式 */
button {
  background-color: #4a90e2;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 26px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

button:hover {
  background-color: #357ab7;
  transform: translateY(-3px);
}

/* 弹出框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: #ffffff;
  padding: 35px;
  border-radius: 15px;
  width: 550px;
  text-align: center;
}

/* 评价输入框样式 */
textarea {
  width: 100%;
  padding: 18px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  margin-bottom: 25px;
  font-size: 1.2em;
  resize: none;
}

/* 评价等级样式 */
.rating {
  display: flex;
  justify-content: center;
  margin-bottom: 25px;
}

.rating label {
  margin: 0 12px;
  font-size: 1.3em;
  cursor: pointer;
}

/* 弹出框操作按钮样式 */
.modal-actions button {
  margin: 8px;
  padding: 14px 30px;
  border-radius: 10px;
  transition: background-color 0.3s, transform 0.3s;
}

/* 媒体查询，用于小屏幕设备 */
@media (max-width: 768px) {
  .container {
    margin: 30px 20px;
    padding: 30px;
  }

  h1 {
    font-size: 2.4em;
  }

  .order-item {
    padding: 20px;
  }

  .modal {
    width: 95%;
  }
}
</style>